﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var ImageStorage = require('util/imageStorage');
    var Config = require('util/config');

    var m_textOptions = [{
        id: 'totalStatus', text: 20, x: 165, y: 226
    }, {
        id: 'vit', text: 0, x: 115, y: 253
    }, {
        id: 'str', text: 0, x: 115, y: 280
    }, {
        id: 'sta', text: 0, x: 115, y: 308
    }, {
        id: 'agi', text: 0, x: 115, y: 337
    }, {
        id: 'totalProperty', text: 10, x: 353, y: 227
    }];
    var m_buttonsOptions = [{
        id: 'expressionUpLeft', x: 140, y: 164, text: 'CHANGE_NOSE'
    }, {
        id: 'expressionUpRight', x: 244, y: 164, text: 'CHANGE_NOSE'
    }, {
        id: 'expressionDownLeft', x: 140, y: 188, text: 'CHANGE_MOUTH'
    }, {
        id: 'expressionDownRight', x: 244, y: 188, text: 'CHANGE_MOUTH'
    }, {
        id: 'vitLeft', x: 146, y: 250, text: 'ABOUT_VIT'
    }, {
        id: 'vitRight', x: 182, y: 250, text: 'ABOUT_VIT'
    }, {
        id: 'strLeft', x: 146, y: 278, text: 'ABOUT_STR'
    }, {
        id: 'strRight', x: 182, y: 278, text: 'ABOUT_STR'
    }, {
        id: 'staLeft', x: 146, y: 305, text: 'ABOUT_DEF'
    }, {
        id: 'staRight', x: 182, y: 305, text: 'ABOUT_DEF'
    }, {
        id: 'agiLeft', x: 146, y: 334, text: 'ABOUT_AGI'
    }, {
        id: 'agiRight', x: 182, y: 334, text: 'ABOUT_AGI'
    }, {
        id: 'landLeft', x: 382, y: 252, text: 'ABOUT_LAND'
    }, {
        id: 'landRight', x: 418, y: 252, text: 'ABOUT_LAND'
    }, {
        id: 'waterLeft', x: 382, y: 276, text: 'ABOUT_WATER'
    }, {
        id: 'waterRight', x: 418, y: 276, text: 'ABOUT_WATER'
    }, {
        id: 'fireLeft', x: 382, y: 299, text: 'ABOUT_FIRE'
    }, {
        id: 'fireRight', x: 418, y: 299, text: 'ABOUT_FIRE'
    }, {
        id: 'windLeft', x: 382, y: 324, text: 'ABOUT_WIND'
    }, {
        id: 'windRight', x: 418, y: 324, text: 'ABOUT_WIND'
    }, {
        id: 'decide', width: 65, height: 66, x: 64, y: 377, text: 'DECIDE_ROLE'
    }, {
        id: 'back', width: 65, height: 66, x: 159, y: 378, text: 'BACK_TO_PREVIOUS'
    }];
    var m_messageOptions = [
        { id: 'nameMessageGroup', bg: Config.images.NAME_MESSAGE },
        { id: 'statusMessageGroup', bg: Config.images.STATUS_MESSAGE },
        { id: 'propertyMessageGroup', bg: Config.images.PROPERTY_MESSAGE }
    ];

    exports.renderCreateAsync = eval(Wind.compile('async', function (character) {
        Canvas.clear();

        var bgLayer = Canvas.createLayer();
        var bgImage = $await(Canvas.createImageAsync({ image: Config.images.CREATE_ROLE_INFO_BG }));
        bgLayer.add(bgImage);

        var headImage = $await(Canvas.createImageAsync({ image: character.getHeadBgPath(), x: 61, y: 135 }));
        bgLayer.add(headImage);
        Canvas.add(bgLayer);

        $('<input id="txtName" style="position: absolute; border: 0; left: 105px; top: 100px; width: 110px; height: 14px; font-size: 10px; background: rgba(0, 0, 0, 0); color: white;">').appendTo(document.body);

        var operatingLayer = Canvas.createLayer();

        var tipText = Canvas.createText({ id: 'tipText', text: Config.words.SETTING_ROLE_INFO, x: 7, y: 459, fill: 'white', fontSize: 14 });
        operatingLayer.add(tipText);

        var expressionUpImage = $await(Canvas.createImageAsync({ id: 'expressionUp', image: character.getExpressionUpPath(), x: 61, y: 135 }));
        operatingLayer.add(expressionUpImage);
        var expressionDownImage = $await(Canvas.createImageAsync({ id: 'expressionDown', image: character.getExpressionDownPath(), x: 61, y: 135 }));
        operatingLayer.add(expressionDownImage);

        for (var i = 0, options; options = m_textOptions[i]; i++) {
            var text = Canvas.createText($.extend({ width: 16, fontSize: 9, fill: 'white', align: 'right' }, options));
            operatingLayer.add(text);
        }

        for (var i = 0; i < 10; i++) {
            var propertyImage = Canvas.createImage({ id: i, width: 12, height: 10 });
            operatingLayer.add(propertyImage);
        }

        var leftUpImg = $await(ImageStorage.getAsync(Config.images.MINUS));
        var leftDownImg = $await(ImageStorage.getAsync(Config.images.MINUS_MOUSE_DOWN));
        var rightUpImg = $await(ImageStorage.getAsync(Config.images.ADD));
        var rightDownImg = $await(ImageStorage.getAsync(Config.images.ADD_MOUSE_DOWN));
        for (var i = 0, options; options = m_buttonsOptions[i]; i++) {
            var node;
            if (options.hasOwnProperty('width')) {
                node = Canvas.createRectWithBoxAnimation(options);
            }
            else {
                var isMinus = -1 < options.id.indexOf('Left');
                node = Canvas.craeteImageWithBoxAnimation($.extend({ image: isMinus ? leftUpImg : rightUpImg }, options));
                node.on('mousedown', (function (downImg) {
                    return function () {
                        this.setImage(downImg);
                    };
                })(isMinus ? leftDownImg : rightDownImg));
                node.on('mouseup mouseout', (function (upImg) {
                    return function () {
                        this.setImage(upImg);
                        this.getLayer().draw();
                    };
                })(isMinus ? leftUpImg : rightUpImg));
            }
            node.on('mouseover', (function (text) {
                return function () {
                    tipText.setText(text);
                };
            })(Config.words[options.text]));
            node.on('mouseout', function () {
                if (this.isVisible()) {
                    tipText.setText(Config.words.SETTING_ROLE_INFO);
                    operatingLayer.draw();
                }
            });
            operatingLayer.add(node);
        }

        for (var i = 0, options; options = m_messageOptions[i]; i++) {
            var group = Canvas.createGroup({ id: options.id, visible: false });
            var image = $await(Canvas.createImageAsync({ image: options.bg }));
            group.add(image);
            var rect = Canvas.createRectWithBoxAnimation({ x: 302, y: 251, width: 30, height: 18 });
            rect.on('click', function () {
                group.hide();
                tipText.setText(Config.words.SETTING_ROLE_INFO);
                Canvas.get('#decide')[0].show();
                operatingLayer.draw();
            });
            group.add(rect);
            operatingLayer.add(group);
        }
        Canvas.add(operatingLayer);
    }));
});